<template>
	<div class="staffInfo">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="large" status-icon>
			<el-form-item label="账号" prop="username">
				<el-input v-model="ruleForm.username" />
			</el-form-item>

			<el-form-item label="员工姓名" prop="name">
				<el-input v-model="ruleForm.name" />
			</el-form-item>

			<el-form-item label="手机号" prop="phone">
				<el-input v-model="ruleForm.phone" />
			</el-form-item>

			<el-form-item label="姓别" prop="sex">
				<el-radio-group v-model="ruleForm.sex">
					<el-radio label="1">男</el-radio>
					<el-radio label="2">女</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="身份证号码" prop="idNumber">
				<el-input v-model="ruleForm.idNumber" />
			</el-form-item>

			<el-form-item label="状态">
				<el-switch v-model="ruleForm.status" inline-prompt
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="启用" inactive-text="禁用" />
			</el-form-item>

			<el-form-item>
				<el-button @click="resetForm(ruleFormRef)">取消</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup name="StaffInfo">
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { IuserInfo } from '@/types'
import { useRouter, useRoute } from 'vue-router'
import { save, updateEmployee } from '@/api/index'
const router = useRouter()
const route = useRoute()

const ruleFormRef = ref<FormInstance>()
const ruleForm: IuserInfo = reactive({
	username: '',
	name: '',
	password: '',
	phone: '',
	sex: '',
	idNumber: '',
	status: true,
	id: ''
})

const rules = reactive<FormRules>({
	username: [{ required: true, message: '必填', trigger: 'blur' }],
	name: [{ required: true, message: '必填', trigger: 'blur' }],
	phone: [{ required: true, message: '必填', trigger: 'blur' }],
	idNumber: [{ required: true, message: '必填', trigger: 'blur' }],
	sex: [{ required: true, message: '必填', trigger: 'change' }]
})

onMounted(() => {
	if (!route.query.userInfo) {
		return
	}
	const userInfo: IuserInfo = JSON.parse(route.query.userInfo as string)
	ruleForm.username = userInfo.username
	ruleForm.name = userInfo.name
	ruleForm.password = userInfo.password
	ruleForm.phone = userInfo.phone
	ruleForm.sex = userInfo.sex
	ruleForm.idNumber = userInfo.idNumber
	ruleForm.status = userInfo.status === 1 ? true : false
	ruleForm.id = userInfo.id

	// getUserInfo(ruleForm.id as string)
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate(valid => {
		if (valid) {
			// 获取路由传参
			const type = route.query.type
			// 定义接口传参
			const param = { ...ruleForm, status: ruleForm.status ? 1 : 0 }
			// 定义方法数组
			const methodArr = [
				{ type: 'add', method: add },
				{ type: 'edit', method: edit }
			]

			// 根据路由传来的类型，调用不同的方法
			methodArr.some(item => {
				if (item.type === type) {
					item.method(param)
					return true
				}
			})
		} else {
			ElMessage.warning('请填写必填项')
		}
	})
}

/**
 * 新增员工接口
 * @param param 员工信息
 */
const add = async (param: IuserInfo) => {
	try {
		const res = await save<string>(param)
		ElMessage.success(res.data || '')
		router.go(-1)
	} catch (error) {
		ElMessage.error(error as string)
	}
}

// const getUserInfo = async (id: string) => {
// 	try {
// 		await getByIdUserInfo<IuserInfo>(id)
// 	} catch (error) {
// 		ElMessage.error(error as string)
// 	}
// }

/**
 * 修改员工信息
 * @param param 修改后的员工信息
 */
const edit = async (param: IuserInfo) => {
	try {
		const { data } = await updateEmployee<string>(param)
		ElMessage.success(data || '')
		router.go(-1)
	} catch (error) {
		ElMessage.error(error as string)
	}
}

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
	router.go(-1)
}
</script>

<style lang="scss">
.staffInfo {
	height: 100%;
	padding: 10px;
	background-color: #fff;

	.el-form {
		width: 35%;

		.el-button--primary {
			color: #333333;
			background-color: #ffc200;
			border-color: #ffc200;
		}
	}
}
</style>
